<template>
  <div class="grow-1 flex-col">
    <div v-if="!publicStore.useAppStateStore().getMicroAppEnvironment" class="flex-row h-50 bg-p-10 justify-left text-xs">
      <div class="w-240 px-20 flex-row items-center text-lg font-semibold bg-dark-4 italic text-white">{{ publicStore.useAppStateStore().getInfo.name }}</div>
    </div>
    <div class="flex-row grow-1">
      <div v-if="!publicStore.useAppStateStore().getMicroAppEnvironment" class="w-240 shrink-0 bg-a-10">
        <!-- <div v-for="(item,index) in publicStores.useUserBaseStateStore().getMenu" :key="(item.name as string)+index" 
          class="flex-row h-50 items-center bg-dark-4 border-b border-light-4 px-20 cursor-pointer hover:bg-p-10 duration-300 transition-all"
          @click="router?.push(item)">
          {{ item.name }}
        </div> -->
        <vmo-tree-menu 
          :options="publicStore.useUserBaseStateStore().getMenu"
          :value = "route.name" 
          :props="{label:'label',value:'name'}"
          :isShrink="false"
          @update:value="router?.push($event.option)">
        </vmo-tree-menu>
        <!-- <div class="grow-1 flex-col text-xs">
          {{ publicStores.useUserBaseStateStore().getMenu }}
        </div> -->
      </div>
      <router-view class="grow-1 border-d-10 transition-all duration-300" v-slot="{ Component }">
        <vmo-transition 
          name="falling" mode="out-in" 
          class="grow-1 flex-col overflow-hidden" 
          :duration="{enter:300,leave:200}" 
          :timing="{enter:'ease-out',leave:'ease-in'}"
          :disabled="publicStore.useAppStateStore().getMicroAppEnvironment">
          <keep-alive :include="routerStateStore.getKeepAlivePage" :max="routerStateStore.getKeepAliveMax">
            <component :is="Component" :key="route.path" class="w-full h-full" />
          </keep-alive>
        </vmo-transition>
      </router-view>
    </div>
  </div>
  
</template>

<script lang="ts">
import { defineComponent, onBeforeMount, onMounted, onActivated, onDeactivated, onBeforeUnmount, onUnmounted } from 'vue';
import { useRouterStateStore } from '@src/router/state';
import { useRouter, useRoute  } from "@src/router/use.lib";
import publicStore from "@src/stores";

export default defineComponent({
  name:'main-pg',
  components:{ },
  setup(props,context){
    const routerStateStore = useRouterStateStore();
    const route = useRoute();
    const router = useRouter();
    // router?.generateRousteByTreeData(publicStores.useUserBaseStateStore().getMenu);

    // onBeforeMount(hookFunction('onBeforeMount'));
    onMounted(()=>{
      console.log('main-pg onMounted');
    });
    onActivated(()=>{
      console.log('main-pg onActivated');
    });
    onDeactivated(()=>{
      console.log('main onDeactivated')
    });
    // onBeforeUnmount(hookFunction('onBeforeUnmount'));;
    // onUnmounted(hookFunction('onUnmounted'));
    
    return {
      routerStateStore,
      route,
      router,
      publicStore
    }
  }
})
</script>